<template>
  <div class="wrapper">
    <!-- 主题 -->
    <h1 class="title">
      <el-input
        v-model="state.title"
        class="title-name"
        placeholder="举办2025年“重庆法院大讲堂”第二场辅导报告座位分布图"
      />
    </h1>
    <!-- 主席台 -->
    <div class="platform"  @click="state.drawer2 = true">主席台</div>
    <div class="container">
      <div class="left-box">
        <span v-for="i in state.columnList" :key="i" class="leftBox-box">{{i.title}}</span>
      </div>
      <template v-if="state.checkedLeft">
        <DrapLeft :tableData="state.checkedDatas"/>
      </template>
      <template v-else>
        <Drap :tableData="state.checkedDatas"/>
      </template>
      <div class="right-box">
        <span v-for="i in state.columnList" :key="i" class="leftBox-box">{{i.title}}</span>
      </div>
    </div>

    <!-- 数据选择抽屉 -->
    <el-drawer v-model="state.drawer2" size='50%'>
      <template #header>
        <h4>设置参会人员名单</h4>
      </template>
      <template #default>
        <div>
          <h4>设置左边是否排座</h4>
          <el-checkbox v-model="state.checkedLeft">左边不排座</el-checkbox>
        </div>
        <div>
          <!-- 多选框 -->
           <!-- <el-checkbox
            v-model="state.checkAll"
            :indeterminate="state.isIndeterminate"
            @change="handleCheckAllChange"
          >
            全选
          </el-checkbox> -->
          <el-checkbox-group
            v-model="state.checkedDatas"
            @change="handleCheckedCitiesChange"
          >
            <div v-for="(Data, index) in state.tableData" :key="index">
              <template v-if="Data.Department">
                <h2 class="title_h2">{{ Data.Department }}</h2>
                <el-checkbox v-for="(item) in Data.list" :key="item.name" :label="item.name" :value="item.name">
                  {{ item.name }}
                </el-checkbox>
              </template>
            </div>
          </el-checkbox-group>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="state.drawer2 = false">取消</el-button>
          <el-button type="primary" @click="confirmClick">确定</el-button>
        </div>
      </template>
    </el-drawer>


  </div>
</template>

<script setup>
// import { myData } from '../../public/data.js';
import { myDataList, columnList} from '../../public/dataList.js';

import Drap from "./Drap.vue";
import DrapLeft from "./DrapLeft.vue";
import { reactive, defineProps, watch, watchEffect } from 'vue';

console.log(myDataList)

const state = reactive({
  columnList: columnList,
  tableData: myDataList,
  myDataLength: 253,
  title:'举办2025年“重庆法院大讲堂”第二场辅导报告座位分布图',
  drawer: false,
  drawer2: false,
  checkAll: false,
  isIndeterminate: true,
  checkedDatas: [],
  checkedLeft: true, // true:左边不坐人
});

// 抽屉确定
const confirmClick = () => {
    console.log(state.checkedDatas)
    state.drawer2 = false
}

const handleCheckAllChange = (val) => {
  console.log(val)
  state.checkedDatas = val ? myData : []
  state.isIndeterminate = false
  console.log(state.checkedDatas)
}

// 多选-单选
const handleCheckedCitiesChange = (value) => {
  console.log(value)
  const checkedCount = value.length
  state.checkAll = checkedCount === state.myDataLength
  state.isIndeterminate = checkedCount > 0 && checkedCount < state.myDataLength
}
</script>

<style scoped lang="less" >
.wrapper {
  width: 1600px;
}
.title {
  width: 80%;
  height: 40px;
  margin: 0 auto 10px;
  .name{
    width: 100%;
    text-align: center;
    
  }
  /deep/.el-input__wrapper{
    box-shadow: none;
  }
  /deep/.el-input__inner {
      color: #000;
      font-weight:bold;
      text-align: center;
      border: 0;
    }
  
}
.platform{
  width: 80%;
  height: 50px;
  background-color: #fff;
  border: 1px solid;
  margin: 0 auto 30px;
  text-align: center;
  line-height: 50px;
}

.container{
  width: 1500px;
  position: relative;
  margin: 0 auto 70px;
  .left-box,.right-box{
    position: absolute;
    top: 0;
    flex-direction: column;
    z-index: 99;
    display: flex;
  }
  .left-box{
    text-align: right;
    left: -85px;
  }
  .right-box{
    right: -30px;
    left: auto;
  }
}

.leftBox{
    
    &-box{
      width: 65px;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
    }
  }

.title_h2{
  height: 20px;
  font-size: 16px;
  margin: 30px auto 0;
  line-height: 20px;
}

</style>
